<template>
  <view>
    <PublicPage pageName="搜索" :pageBgcolor="pageBgColor" class="sst-search-page">
      <view class="search-input">
        <u-search
            v-model="params.keyword"
            placeholder="输入关键词搜索"
            @search="searchFun"
            @custom="searchFun"
            @focus="resetParams"
            @clear="resetParams"
        />
      </view>
      <!-- 缺省页 -->
      <DefaultPage v-if="isEmpty" type="3" minusHeight="52" tips="暂未搜到相关结果，换个关键词试试～" />
      <ScrollList
          v-else-if="list.length"
          ref="scrollView1"
          minusHeight="52"
          :scrollAnimation="false"
          @interrupt="interrupt"
          @scrolltolower="scrolltolower"
      >
        <template slot="content">
          <DynamicCard
              :type="1"
              :list="list"
              :loading="loading"
              @groupBtn="_dynamicGroupBtn"
          />
        </template>
      </ScrollList>
      <!-- 搜索历史 -->
      <view v-else class="search-wrap">
        <view class="search-head u-flex u-col-center u-row-between">
          <view class="txt-l">搜索历史</view>
          <view class="txt-r" @click="removeRecord">清空历史</view>
        </view>
        <view class="u-flex u-flex-wrap">
          <view
              v-for="(item,index) in recordList"
              :key="index"
              class="search-tag"
              @click="clickTag(item)"
          >{{item}}</view>
        </view>
      </view>
    </PublicPage>
    <!-- 开团成功海报 -->
    <OpenGroupSharing
        ref="shareChild"
        @shareSuccess="_shareSuccess"
    />
    <PublishPopup
        v-if="dlGroup"
        :sharePublishData="shareObject"
        @closeSharePublishFn="(flag)=>dlGroup=flag"
    />
    <!-- 动态分享、邀请帮卖 -->
    <SharePublicPage
        v-if="dlShare"
        :shareVideoData="shareObject"
        @cancelShareFn="(flag) => dlShare = false"
        @posterFn="_posterFn"
    />
    <!-- 保存相册海报分享 -->
    <SharePoster
        v-if="dlPoster"
        :shareVideoData="shareObject"
        @cancelSharePosterFn="() => dlPoster = false"
    />
    <!-- 已经帮卖弹窗 -->
    <SoldForHelpSell
        v-if="isSoldForHelpSellShow"
        :soldForHelpSellId="soldForHelpSellId"
        @closeSoldForFn="closeSoldForFn"
    />

  </view>
</template>

<script>
import PublicPage from '@/components/publicPage/index.vue'
import DefaultPage from '@/components/defaultPage/index.vue'
import ScrollList from '@/components/scrollList/index.vue'
import DynamicCard from '@/components/dynamicCard/index.vue'
import OpenGroupSharing from "@/components/shareImage/openGroupSharing.vue"
import PublishPopup from '@/components/publishPopup/index.vue'
import SharePublicPage from '@/components/shareModal/sharePublicPage.vue'
import SharePoster from '@/components/shareModal/sharePoster.vue'
import SoldForHelpSell from '@/components/soldForHelpSell/index.vue'
import shareMixin from '@/components/dynamicCard/shareMixin'

import miniApi from '@/api/mini.js'
export default {
  name: 'searchPage',
  // 分享、海报相关在shareMixin中
  mixins: [shareMixin],
  components: {
    PublicPage,
    DefaultPage,
    ScrollList,
    DynamicCard,
    OpenGroupSharing,
    PublishPopup,
    SharePublicPage,
    SharePoster,
    SoldForHelpSell
  },
  data() {
    return {
      pageBgColor: '#ffffff',
      recordList: [],
      isEmpty: false,
      params: {
        currentPage: 1,
        pageSize: 10,
        type: 1,
        keyword: '',
      },
      list: [], // 视频列表
      listMore1: true,
      loading: true,
      isSoldForHelpSellShow: false, // 帮卖过了不可帮卖
      soldForHelpSellId: '', // 已经帮卖返回自己帮卖团的id
    }
  },
  onShow() {
    this.getStorage()
  },
  methods: {
    // 获取缓存中的数据
    getStorage() {
      uni.getStorage({key: 's_p_records', success: ({ data }) => {this.recordList = data}})
    },
    // 清空历史
    removeRecord() {
      if (!this.recordList.length) return
      this.recordList = []
      uni.removeStorage({ key: 's_p_records' })
    },
    // 搜索
    searchFun(val) {
      this.getDynamics()
      // 过滤重复历史记录
      for (let i = 0, length = this.recordList.length; i < length; i++) {
        const key = this.recordList[i]
        if (key === val) {
          this.recordList.splice(i, 1)
          break
        }
      }
      this.recordList.unshift(val)
      // 历史记录最多展示10条
      if (this.recordList.length > 10) {
        this.recordList = this.recordList.slice(0, 10)
      }
      uni.setStorage({ key: 's_p_records', data: this.recordList })
    },
    // 点击搜索历史的tag
    clickTag(key) {
      if (this.params.keyword === key) return
      this.params.keyword = key
      this.resetParams()
      this.getDynamics()
    },
    resetParams() {
      this.list = []
      this.isEmpty = false
      this.params.currentPage = 1
      this.listMore1 = true
      this.loading = true
      this.pageBgColor = '#ffffff'
    },
    // 获取视频列表
    getDynamics() {
      this.pageBgColor = '#F7F8FA'
      miniApi.getHomeDynamicsV2(this.params).then((res) => {
        if (this.params.currentPage === 1) {
          this.list = res.data.records
          if (!this.list.length) this.isEmpty = true
        } else {
          this.list = this.list.concat(res.data.records)
        }

        if ((this.params.currentPage * this.params.pageSize) !== this.list.length) {
          // 无更多数据标识
          this.listMore1 = false
          this.$refs.scrollView1 && this.$refs.scrollView1.loadFinish(3)
        }

        if (this.params.currentPage === 1 && this.loading) {
          setTimeout(() => {
            this.loading = false
          }, 250)
        }

      }).catch(err => {
        this.isEmpty = true
        this.$refs.scrollView1 && this.$refs.scrollView1.loadFinish(3)
      })
    },
    interrupt() {
      this.isEmpty = false
      this.params.currentPage = 1
      this.listMore1 = true
      this.getDynamics()
      setTimeout(() => {
        this.$refs.scrollView1.refreshFinish() // 刷新完成
      },400)
    },
    scrolltolower() {
      ++this.params.currentPage
      this.getDynamics()
      this.$refs.scrollView1.loadFinish(this.listMore1 ? 0 : 3) // 加载完成
    },
    closeSoldForFn () {
      this.isSoldForHelpSellShow = false
    },
  }
}
</script>

<style lang="scss" scoped>
.sst-search-page {
  width: 100%;
  height: 100%;
  .search-input {
    height: 104rpx;
    line-height: 104rpx;
    padding: 0 32rpx;
    background-color: #FFFFFF;
  }
  .search-wrap {
    padding: 24rpx 32rpx 0;
  }
  .search-head {
    height: 76rpx;
  }
  .txt-l {
    font-size: 32rpx;
    line-height: 44rpx;
    color: $n8Color;
  }
  .txt-r {
    font-size: 24rpx;
    line-height: 34rpx;
    color: $themeColor;
  }
  .search-tag {
    height: 48rpx;
    min-width: 72rpx;
    padding: 0 16rpx;
    margin: 16rpx 24rpx 0 0;
    @include bov(1);
    text-align: center;
    border-radius: 32rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    color: $n6Color;
    background-color: $n2Color;
  }
}
</style>
